<template>
  <div id="app">

    <!-- el-menu
        default-active:默认选中哪一项，对应 子项的index的值
        router:是否使用路由模式，默认是false,index的值就是跳转路由的path
        el-menu-item
           默认插槽：常用于放图标
           具名插槽：常用于放菜单文本

 -->

    <el-menu
      :default-active="$route.path"
      router
    >
      <el-menu-item v-for="(item,index) in newMenu" :key="index" :index="item.children[0].path">
        <i class="el-icon-menu" />
        <template #title>
          <span>{{ item.children[0].meta.title }}</span>
        </template>
      </el-menu-item>
    </el-menu>

    <!-- <router-view /> -->

  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {

    }
  },
  computed: {
    newMenu() {
      return this.$router.options.routes.filter(item => !item.hidden)
    }
  },
  created() {
    console.log(this.$router.options.routes)
  }
}
</script>
